<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/includes.jsp" %>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑文档|OneThink管理平台</title>
    <link href="${ctx}/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="${ctx}/admin/css/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="${ctx}/admin/css/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="${ctx}/admin/css/module.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/admin/css/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="${ctx}/admin/css/default_color.css" media="all">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="${ctx}/static/jquery-1.10.2.min.js"></script>
    <![endif]--><!--[if gte IE 9]><!-->
    <script type="text/javascript" src="${ctx}/static/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/admin/js/jquery.mousewheel.js"></script>
    <!--<![endif]-->

</head>
<body>
<!-- 头部 -->
<div class="header">
    <!-- Logo -->
    <span class="logo"></span>
    <!-- /Logo -->

    <!-- 主导航 -->
    <ul class="main-nav">
    </ul>
    <!-- /主导航 -->

    <!-- 用户栏 -->
    <div class="user-bar">
        <a href="javascript:;" class="user-entrance"><i class="icon-user"></i></a>
        <ul class="nav-list user-menu hidden">
            <li class="manager">你好，<em title="Administrator">Administrator</em></li>
            <li><a href="/ot/admin.php?s=/User/updatePassword.html">修改密码</a></li>
            <li><a href="/ot/admin.php?s=/User/updateNickname.html">修改昵称</a></li>
            <li><a href="/ot/admin.php?s=/Public/logout.html">退出</a></li>
        </ul>
    </div>
</div>
<!-- /头部 -->

<!-- 边栏 -->
<%--<div class="sidebar">--%>
<%--</div>--%>
<%@ include file="/WEB-INF/jsp/commons/leftmenu.jsp" %>
<!-- /边栏 -->

<!-- 内容区 -->
<div id="main-content">
    <div id="top-alert" class="fixed alert alert-error" style="display: none;">
        <button class="close fixed" style="margin-top: 4px;">&times;</button>
        <div class="alert-content">这是内容</div>
    </div>
    <div id="main" class="main">

        <!-- nav -->
        <!-- nav -->
        <script type="text/javascript" src="${ctx}/static/uploadify/jquery.uploadify.min.js"></script>
        <div class="main-title cf">
            <h2>
                添加产品
            </h2>
        </div>
        <!-- 标签页导航 -->
        <div class="tab-wrap">
            <ul class="tab-nav nav">
                <li data-tab="tab1" class="current"><a href="javascript:void(0);">基本信息</a></li>
                <li data-tab="tab2" ><a href="javascript:void(0);">详细信息</a></li>
                <li data-tab="tab3" ><a href="javascript:void(0);">价格信息</a></li>
                <li data-tab="tab4" ><a href="javascript:void(0);">产品相册</a></li>
            </ul>

            <div class="tab-content">
                <!-- 表单 -->
                <form id="form" action="${ctx}/admin/product/add.shtml" method="post" class="form-horizontal">
                    <!-- 基础文档模型 -->
                    <div id="tab1" class="tab-pane in tab1">
                        <div class="form-item cf">
                            <label class="item-label">产品号</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="sn" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">产品名称</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="name" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">产品版本</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="ver" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">产品类别</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="typeId" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">产品简述</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="description" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">售卖时间<span class="check-tips"></span></label>
                            <div class="controls">
                                <input type="text" name="saleDate" class="text date" value="" placeholder="请选择日期" />
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">排序<span class="check-tips"></span></label>
                            <div class="controls">
                                <input type="text" class="text input-mid" name="sort" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">是否售卖<span class="check-tips"></span></label>
                            <div class="controls">
                                <label class="radio">
                                    <input type="radio" value="0" name="isSale" checked="checked">否
                                </label>
                                <label class="radio">
                                    <input type="radio" value="1" name="isSale">是
                                </label>
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">能否试用<span class="check-tips"></span></label>
                            <div class="controls">
                                <label class="radio">
                                    <input type="radio" value="0" name="isTryout" checked="checked">否
                                </label>
                                <label class="radio">
                                    <input type="radio" value="1" name="isTryout">是
                                </label>
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">试用周期</label>
                            <div class="controls">
                                <input type="text" class="text mid" name="tryoutDay" value="0">
                            </div>
                        </div>
                    </div>

                    <div id="tab2" class="tab-pane tab2">
                        <div class="form-item cf">
                            <label class="item-label">详细描述<span class="check-tips"></span></label>
                            <div class="controls">
                                <label class="textarea">
                                    <textarea name="information">
                                    </textarea>

                                    <input type="hidden" name="parse" value="0"/>
                                    <link rel="stylesheet" href="${ctx}/static/kindeditor/default/default.css" />
                                    <script charset="utf-8" src="${ctx}/static/kindeditor/kindeditor-min.js"></script>
                                    <script charset="utf-8" src="${ctx}/static/kindeditor/zh_CN.js"></script>
                                    <script type="text/javascript">
                                        var editor_information;
                                        KindEditor.ready(function(K) {
                                            editor_information = K.create('textarea[name="information"]', {
                                                allowFileManager : false,
                                                themesPath: K.basePath,
                                                width: '100%',
                                                height: '500px',
                                                resizeType: 1,
                                                pasteType : 2,
                                                urlType : 'absolute',
                                                fileManagerJson : '/ot/admin.php?s=/Article/fileManagerJson.html',
                                                //uploadJson : '/ot/admin.php?s=/Article/uploadJson.html' }
                                                //uploadJson : '/ot/admin.php?s=/Addons/execute/_addons/EditorForAdmin/_controller/Upload/_action/ke_upimg.html',
                                                extraFileUploadParams: {
                                                    session_id : '4pcs0ppja39ve7lecjbob3l250'
                                                }
                                            });
                                        });

                                        $(function(){
                                            //传统表单提交同步
                                            $('textarea[name="information"]').closest('form').submit(function(){
                                                editor_information.sync();
                                            });
                                            //ajax提交之前同步
                                            $('button[type="submit"],#submit,.ajax-post,#autoSave').click(function(){
                                                editor_information.sync();
                                            });
                                        })
                                    </script>
                                </label>
                            </div>
                        </div>

                    </div>
                    <div id="tab3" class="tab-pane tab3">

                        <div class="form-item cf">
                            <label class="item-label">显示月价格<span class="check-tips"></span></label>
                            <div class="controls">
                                <label class="radio">
                                    <input type="radio" value="0" name="isMonth" checked="checked">否
                                </label>
                                <label class="radio">
                                    <input type="radio" value="1" name="isMonth">是
                                </label>
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">月价格</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="mnPrice" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">月价格(原)</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="mnOriginalPrice" value="">
                            </div>
                        </div>


                        <div class="form-item cf">
                            <label class="item-label">显示年价格<span class="check-tips"></span></label>
                            <div class="controls">
                                <label class="radio">
                                    <input type="radio" value="0" name="isYear">否
                                </label>
                                <label class="radio">
                                    <input type="radio" value="1" name="isYear" checked="checked">是
                                </label>
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">年价格</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="yyPrice" value="">
                            </div>
                        </div>

                        <div class="form-item cf">
                            <label class="item-label">年价格(原)</label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="yyOriginalPrice" value="">
                            </div>
                        </div>
                    </div>

                    <div id="tab4" class="tab-pane tab4">

                        <div class="form-item cf">
                            <label class="item-label">上传文件<span class="check-tips"></span></label>
                            <div class="controls">
                                <div class="controls" id="container">
                                    <a class="btn" id="pickfiles" href="#">
                                        <span>选择文件</span>
                                    </a>
                                    <div class="upload-img-box">
                                    </div>
                                </div>

                                <script type="text/javascript" src="${ctx}/static/plupload/js/moxie.js"></script>
                                <script type="text/javascript" src="${ctx}/static/plupload/js/plupload.dev.js"></script>
                                <script type="text/javascript" src="${ctx}/static/plupload/js/i18n/zh_CN.js"></script>
                                <script charset="utf-8" src="${ctx}/static/qiniu/qiniu.min.js"></script>
                                <script type="text/javascript" charset="utf-8" src="${ctx}/admin/js/product/ui.js"></script>
                                <script type="text/javascript">
                                    <%--//上传图片--%>
                                    $(function() {
                                                //引入Plupload 、qiniu.js后
                                                var uploader = Qiniu.uploader({
                                                    runtimes: 'html5,flash,html4',    //上传模式,依次退化
                                                    browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
                                                    uptoken_url: '${ctx}/admin/qiniutoken.shtml',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
                                                    // uptoken : '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
                                                    // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
                                                    // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
                                                    domain: 'http://oeuzzdbf9.bkt.clouddn.com/',   //bucket 域名，下载资源时用到，**必需**
                                                    get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
                                                    container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
                                                    max_file_size: '100mb',           //最大文件体积限制
                                                    flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
                                                    max_retries: 3,                   //上传失败最大重试次数
                                                    dragdrop: true,                   //开启可拖曳上传
                                                    drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                                                    chunk_size: '4mb',                //分块上传时，每片的体积
                                                    auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                                                    init: {
                                                        'FilesAdded': function (up, files) {
                                                            plupload.each(files, function (file) {
                                                                // 文件添加进队列后,处理相关的事情
                                                                var progress = new FileProgress(file, 'fsUploadProgress');
                                                                //progress.setStatus("等待...");
                                                                //progress.bindUploadCancel(up);
                                                            });
                                                        },
                                                        'BeforeUpload': function (up, file) {
//                                                            // 每个文件上传前,处理相关的事情
//                                                            var progress = new FileProgress(file, 'fsUploadProgress');
//                                                            var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
//                                                            if (up.runtime === 'html5' && chunk_size) {
//                                                                progress.setChunkProgess(chunk_size);
//                                                            }
                                                        },
                                                        'UploadProgress': function (up, file) {
//                                                            // 每个文件上传时,处理相关的事情
                                                            var progress = new FileProgress(file, 'fsUploadProgress');
                                                            var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                                                            progress.setProgress(file.percent + "%", file.speed, chunk_size);
                                                        },
                                                        'FileUploaded': function (up, file, info) {
                                                            // 每个文件上传成功后,处理相关的事情
                                                            // 其中 info 是文件上传成功后，服务端返回的json，形式如
                                                            // {
                                                            //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                                                            //    "key": "gogopher.jpg"
                                                            //  }
                                                            // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                                                            // var domain = up.getOption('domain');
                                                            // var res = parseJSON(info);
                                                            // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                                                            var progress = new FileProgress(file, 'fsUploadProgress');
                                                            progress.setComplete(up, info);
                                                        },
                                                        'Error': function (up, err, errTip) {
                                                            //上传出错时,处理相关的事情
                                                            var progress = new FileProgress(file, 'fsUploadProgress');
                                                            progress.setError();
                                                        },
                                                        'UploadComplete': function () {
                                                            //队列文件处理完毕后,处理相关的事情
                                                            //上传出错时,处理相关的事情
                                                            //var progress = new FileProgress(file, 'fsUploadProgress');
                                                            //progress.setComplete();
                                                        }
//                                                        ,
//                                                        'Key': function (up, file) {
//                                                            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
//                                                            // 该配置必须要在 unique_names: false , save_key: false 时才生效
//
//                                                            var key = "";
//                                                            // do something with key here
//                                                            return key
//                                                        }
                                                    }
                                                });
                                            }
                                    );
                                </script>
                            </div>

                            <!-- 数据表格 -->
                            <div class="data-table">
                                <table>
                                    <!-- 表头 -->
                                    <thead>
                                    <tr>
                                        <th class="row-selected row-selected">
                                            <input class="check-all" type="checkbox">
                                        </th>
                                        <th>文件名</th><th>大小</th><th>明细</th><th>操作</th>
                                    </tr>
                                    </thead>

                                    <!-- 列表 -->
                                    <tbody id="fsUploadProgress">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="form-item cf">
                        <input type="hidden" name="id" value="0"/>
                        <%--<input type="hidden" name="jsonPics" value='[{fileName:"kkk", fileSize:500},{fileName:"kkk2", fileSize:500}]'/>--%>
                        <button class="btn submit-btn ajax-post hidden" id="submit" type="submit" target-form="form-horizontal">确 定</button>
                        <a class="btn btn-return" href="${ctx}/admin/product/index.shtml">返 回</a>
                    </div>
                </form>
            </div>
        </div>
        <div class="cont-ft">
            <div class="copyright">
                <div class="fl">感谢使用管理平台</div>
                <div class="fr">V1.1.141101</div>
            </div>
        </div>
    </div>
</div>

<!-- /内容区 -->

<script type="text/javascript" src="${ctx}/admin/js/common.js"></script>
<script type="text/javascript">
    +function(){
        var $window = $(window), $subnav = $("#subnav"), url;
        $window.resize(function(){
            $("#main").css("min-height", $window.height() - 130);
        }).resize();

        /* 左边菜单高亮 */
        url = window.location.pathname + window.location.search;
        console.log(url);
        console.log(window.location.pathname);
        console.log(window.location.search);
        // url = url.replace(/(\/(p)\/\d+)|(&p=\d+)|(\/(id)\/\d+)|(&id=\d+)|(\/(group)\/\d+)|(&group=\d+)/, "");
        url = url.replace(/\/([a-zA-Z 0-9]+)\/([a-zA-Z 0-9]+)\/([a-zA-Z 0-9]+).+/, "/$1/$2/$3/index.shtml");
        console.log("url2=" + url);
        $subnav.find("a[href='" + url + "']").parent().addClass("current");

        /* 左边菜单显示收起 */
        $("#subnav").on("click", "h3", function(){
            var $this = $(this);
            $this.find(".icon").toggleClass("icon-fold");
            $this.next().slideToggle("fast").siblings(".side-sub-menu:visible").
            prev("h3").find("i").addClass("icon-fold").end().end().hide();
        });

        $("#subnav h3 a").click(function(e){e.stopPropagation()});

        /* 头部管理员菜单 */
        $(".user-bar").mouseenter(function(){
            var userMenu = $(this).children(".user-menu ");
            userMenu.removeClass("hidden");
            clearTimeout(userMenu.data("timeout"));
        }).mouseleave(function(){
            var userMenu = $(this).children(".user-menu");
            userMenu.data("timeout") && clearTimeout(userMenu.data("timeout"));
            userMenu.data("timeout", setTimeout(function(){userMenu.addClass("hidden")}, 100));
        });

        /* 表单获取焦点变色 */
        $("form").on("focus", "input", function(){
            $(this).addClass('focus');
        }).on("blur","input",function(){
            $(this).removeClass('focus');
        });
        $("form").on("focus", "textarea", function(){
            $(this).closest('label').addClass('focus');
        }).on("blur","textarea",function(){
            $(this).closest('label').removeClass('focus');
        });

        // 导航栏超出窗口高度后的模拟滚动条
        var sHeight = $(".sidebar").height();
        var subHeight  = $(".subnav").height();
        var diff = subHeight - sHeight; //250
        var sub = $(".subnav");
        if(diff > 0){
            $(window).mousewheel(function(event, delta){
                if(delta>0){
                    if(parseInt(sub.css('marginTop'))>-10){
                        sub.css('marginTop','0px');
                    }else{
                        sub.css('marginTop','+='+10);
                    }
                }else{
                    if(parseInt(sub.css('marginTop'))<'-'+(diff-10)){
                        sub.css('marginTop','-'+(diff-10));
                    }else{
                        sub.css('marginTop','-='+10);
                    }
                }
            });
        }
    }();
</script>

<link href="${ctx}/static/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
<link href="${ctx}/static/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx}/static/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${ctx}/static/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('#submit').click(function(){
        $('#form').submit();
    });

    $(function(){
        $('.date').datetimepicker({
            format: 'yyyy-mm-dd',
            language:"zh-CN",
            minView:2,
            autoclose:true
        });
        $('.time').datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language:"zh-CN",
            minView:2,
            autoclose:true
        });
        showTab();


    });
</script>

</body>
</html>